<template>
    <div class="menu_tree">
        <div class="btn_container">
            <el-button type="primary" @click="addNewOne" size="small" class="btn-class">增加</el-button>
            <el-button type="warning" @click="editNewOne" size="small" class="btn-class">修改</el-button>
            <el-button type="danger" @click="deleteNewOne" size="small" class="btn-class">删除</el-button>
        </div>
        <!-- <el-scrollbar> -->
        <el-tree
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
            :data="treeList"
            :props="defaultProps"
            @node-click="handleNodeClick"
            node-key="menu_id"
            ref="tree"
        ></el-tree>
        <!-- </el-scrollbar> -->
    </div>
</template>
<script>
export default {
    props: {
        treeList: JSON
    },
    data() {
        return {
            defaultProps: {
                children: "childlist",
                label: "menu_name"
            }
        };
    },
    methods: {
        // 新增按钮点击
        addNewOne() {
            this.$emit("addNewOne");
        },
        // 修改按钮点击
        editNewOne() {
            this.$emit("editNewOne");
        },
        // 删除按钮点击
        deleteNewOne() {
            this.$emit("deleteNewOne");
        },
        // tree节点点击
        handleNodeClick(val) {
            this.$emit("treeVal", val);
        }
    },
    created() {}
};
</script>
<style lang='scss'>
.menu_tree {
    .btn_container {
        display: flex;
        justify-content: space-between;
        margin: 20px 10px;
        text-align: left;
    }
}
</style>


